<template>
  <!-- 访客来访记录 -->
  <div class="visitor-record chart-box1">
    <div class="chart-title">访客来访记录</div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="list" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";

export default defineComponent({
  name: "VisitorRecord",
  components: { ScrollTable },
  setup(props) {
    const state = reactive({
      tableHeader: [
        { key: "name", title: "访客姓名" },
        { key: "time", title: "来访时间" },
        { key: "place", title: "目的地" },
      ],
      config: {
        style: [{ color: "#fff" }],
      },
      list: [],
    });

    watch(
      () => store.getters.flow.VisitorHistory,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { VisitorHistory } = store.getters.flow;
      if (VisitorHistory && VisitorHistory.list && VisitorHistory.list.length) {
        state.list = VisitorHistory.list;
      }
    };
    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
